<template>
	<view>
		<nav-box :title="pageTitle" :borderBottom="false" :showImage="examType == 1">
			<view class="right-box" v-if="examType == 2">
				<image src="../../static/images/countDown.png" mode=""></image>
				<u-count-down :font-size="28" separator-color="#FF6F21" color="#FF6F21" :timestamp="timestamp" @end="timeEnd"></u-count-down>
			</view>
		</nav-box>
		<block v-if="subjectList.length == 0">
			<view class="empty-box">
				<image src="../../static/images/empty_icon.png" mode=""></image>
				<text>暂无练习试题</text>
			</view>
		</block>
		<block v-else>
			<view class="layout-box">
				<view class="menu-box">
					<view class="menu-item" @click="showData(1)">
						<text>未答({{ unanswered.length }})</text>
					</view>
					<view class="menu-item" @click="showData(2)">
						<text>标记({{ sign.length }})</text>
					</view>
					<view class="menu-item" @click="showData(3)">
						<text>全部({{ subjectList.length }})</text>
					</view>
				</view>
				<view class="progress-box">
					<text>{{ answerCurrent > 10 ? answerCurrent : `0${answerCurrent}` }}</text>
					<text>/{{ subjectList.length > 10 ? subjectList.length : `0${subjectList.length}` }}</text>
					<u-line-progress
						inactive-color="#D5E2FF"
						active-color="#2D6EFF"
						:percent="(answerCurrent / subjectList.length) * 100"
						:height="16"
						:show-percent="false"
					></u-line-progress>
				</view>
				<view class="subject-box">
					<view class="subject-content">
						<block v-for="(item, index) in subjectList" :key="item.QUESTIONS_ID">
							<view v-show="index == current">
								<view class="title-box">
									<text class="subject-number">{{ index + 1 }}、【{{ subjectName.name }}】</text>
									<rich-text :nodes="item.QUESTION_TITLE" class="subject-title"></rich-text>
								</view>
								<view class="answer-box">
									<view class="radio-options" v-show="subjectName.type == 3 || subjectName.type == 5">
										<view class="options-box">
											<radio-group :data-oindex="index" @change="radioChange">
												<label
													v-for="(items, optionsIndex) in item.dataList"
													:key="items.ID"
													:class="subjectList[index].answer == items.ID ? 'check-label' : ''"
												>
													<radio :value="items.ID" :checked="subjectList[index].answer == items.ID" />
													<text v-show="subjectName.type == 3">{{ optionsList[optionsIndex] }}、</text>
													<rich-text :nodes="items.OPTION_NAME"></rich-text>
												</label>
											</radio-group>
										</view>
									</view>
									<view class="check-options" v-show="subjectName.type == 4">
										<checkbox-group :data-oindex="index" @change="checkChange">
											<label v-for="(items, optionsIndex) in item.dataList" :key="optionsIndex" :class="items.checked ? 'check-label' : ''">
												<checkbox :value="items.ID" />
												<text>{{ optionsList[optionsIndex] }}、</text>
												<rich-text :nodes="items.OPTION_NAME"></rich-text>
											</label>
										</checkbox-group>
									</view>
									<view class="filling-box" v-show="subjectName.type == 6 || subjectName.type == 7">
										<textarea :value="item.answer && ''" maxlength="600" placeholder="请输入答案" @input="answerWords" />
										<text class="words">{{ wordsNumber }}/600</text>
									</view>
									<view class="analysis-box" v-show="subjectName.type == 8 || subjectName.type == 9 || subjectName.type == 10">
										<block v-for="(items, subIndex) in item.SUBQUESTIONS">
											<view class="subItem-box">
												<view class="subTitle-box">
													<text>({{ subIndex + 1 }})</text>
													<rich-text :nodes="items.QUESTION_TITLE"></rich-text>
												</view>
												<view class="radio-options" v-show="items.SUB_WIDGETS_ID == 3 || items.SUB_WIDGETS_ID == 5">
													<view class="options-box">
														<radio-group :data-oindex="index" @change="radioChange">
															<label
																v-for="(subItem, subIndex) in items.dataList"
																:key="subItem.ID"
																:class="subjectList[index].answer == subItem.ID ? 'check-label' : ''"
															>
																<radio :value="subItem.ID" :checked="subjectList[index].answer == subItem.ID" />
																<text>{{ optionsList[subIndex] }}、</text>
																<rich-text :nodes="subItem.OPTION_NAME"></rich-text>
															</label>
														</radio-group>
													</view>
												</view>
												<view class="check-options" v-show="items.SUB_WIDGETS_ID == 4">
													<checkbox-group :data-oindex="index" @change="checkChange">
														<label v-for="(items, optionsIndex) in item.dataList" :key="optionsIndex" :class="items.checked ? 'check-label' : ''">
															<checkbox :value="items.ID" />
															<text>{{ optionsList[optionsIndex] }}、</text>
															<rich-text :nodes="items.OPTION_NAME"></rich-text>
														</label>
													</checkbox-group>
												</view>
												<view class="filling-box" v-show="items.SUB_WIDGETS_ID == 6 || items.SUB_WIDGETS_ID == 7">
													<textarea :value="item.answer && ''" maxlength="600" placeholder="请输入答案" @input="answerWords" />
													<text class="words">{{ wordsNumber }}/600</text>
												</view>
											</view>
										</block>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="control-box">
						<view class="control-item"><text v-show="current != 0" @click="prev()">上一题</text></view>
						<view class="control-item">
							<image
								:src="subjectList[current].isSign ? '../../static/images/btn_sign_selected.png' : '../../static/images/btn_sign_normal.png'"
								mode=""
								@click="signSubject(current)"
							></image>
						</view>
						<view class="control-item"><text v-show="current != subjectList.length - 1" @click="next">下一题</text></view>
					</view>
				</view>
			</view>
			<view class="btn-box"><u-button class="confirm-btn" shape="circle" hover-class="none" @click="show = true">提交答卷</u-button></view>
		</block>
		<u-modal
			v-model="show"
			:content="content"
			title=""
			cancel-color="#2979ff"
			:show-cancel-button="showCancelBtn"
			:confirm-text="confirmText"
			@confirm="confirmSubject"
		></u-modal>
		<u-mask :show="maskShow" @click="maskShow = false" duration="0">
			<view class="wrap" @tap.stop>
				<nav-box :title="pageTitle"></nav-box>
				<view class="menu-box">
					<view :class="['menu-item', menuKey == 1 ? 'active' : '']" @click="menuChange(1)">
						<text>未答({{ unanswered.length }})</text>
					</view>
					<view :class="['menu-item', menuKey == 2 ? 'active' : '']" @click="menuChange(2)">
						<text>标记({{ sign.length }})</text>
					</view>
					<view :class="['menu-item', menuKey == 3 ? 'active' : '']" @click="menuChange(3)">
						<text>全部({{ subjectList.length }})</text>
					</view>
				</view>
				<scroll-view class="number-box" scroll-y>
					<block v-for="(item, index) in numberList" :key="index">
						<view class="number-item" @click="currentChange(item)">
							<text>{{ item + 1 }}</text>
						</view>
					</block>
				</scroll-view>
			</view>
		</u-mask>
	</view>
</template>

<script>
import subJect from '@/test.json';
// 3单选,4多选,5判断,6填空,7简答,8案例分析,9共享题干,10共享选项
//考试类型 1模拟 2正式
export default {
	data() {
		return {
			show: false,
			content: '是否提交答卷',
			types: [
				{
					type: 3,
					name: '单选题'
				},
				{
					type: 4,
					name: '多选题'
				},
				{
					type: 5,
					name: '判断题'
				},
				{
					type: 6,
					name: '填空题'
				},
				{
					type: 7,
					name: '简答题'
				},
				{
					type: 8,
					name: '案例分析'
				},
				{
					type: 9,
					name: '共享题干'
				},
				{
					type: 10,
					name: '共享选项'
				}
			],
			optionsList: ['A', 'B', 'C', 'D', 'E', 'F'],
			menuKey: null,
			maskShow: false,
			pageTitle: '',
			mark: false, //是否标记
			current: 0, //题目进度,
			subjectList: [], //题库
			unanswered: [], //未作答列表
			sign: [], //标记列表
			userAnswerList: [], //用户答案
			numberList: [],
			examType: null,
			timestamp: 9999,
			showCancelBtn: true,
			confirmText: '确定'
		};
	},
	onLoad(options) {
		this.userAnswerList = subJect.data.questionsList; //替换接口数据
		this.subjectList = subJect.data.questionsList; //替换接口数据
		this.pageTitle = options.title;
		this.unanswered = Array(this.subjectList.length)
			.fill()
			.map((_, i) => i);
		this.examType = options.examType;
	},
	methods: {
		next() {
			console.log(this.subjectList[this.current].answer);
			this.current++;
		},
		prev() {
			this.current--;
		},
		radioChange(e) {
			let index = e.currentTarget.dataset.oindex;
			this.$set(this.subjectList[index], 'answer', e.detail.value);
		},
		showData(index) {
			this.maskShow = true;
			this.menuKey = index;
			if (this.menuKey == 1) {
				this.numberList = this.unanswered;
			} else if (this.menuKey == 2) {
				this.numberList = this.sign;
			} else {
				this.numberList = Array(this.subjectList.length)
					.fill()
					.map((_, i) => i);
			}
		},
		menuChange(index) {
			this.menuKey = index;
			if (this.menuKey == 1) {
				this.numberList = this.unanswered;
			} else if (this.menuKey == 2) {
				this.numberList = this.sign;
			} else {
				this.numberList = Array(this.subjectList.length)
					.fill()
					.map((_, i) => i);
			}
		},
		checkChange(e) {
			let answer = e.detail.value;
			let index = e.currentTarget.dataset.oindex;
			if (answer.length > 0) {
				this.$set(this.subjectList[index], 'answer', answer);
			} else {
				this.$delete(this.subjectList[index], 'answer');
			}
			this.subjectList[index].dataList.map(item => {
				this.$set(item, 'checked', answer.find(v => v == item.ID));
			});
		},
		signSubject(index) {
			if (this.subjectList[index].isSign) {
				this.subjectList[index].isSign = !this.subjectList[index].isSign;
				this.sign.splice(this.sign.indexOf(index), 1);
			} else {
				this.$set(this.subjectList[index], 'isSign', true);
				this.sign.push(index);
			}
		},
		currentChange(current) {
			this.current = current;
			this.maskShow = false;
		},
		answerWords(e) {
			let words = e.detail.value;
			this.wordsNumber = words.length;
			if (words.length != 0) {
				this.$set(this.subjectList[this.current], 'answer', words);
			} else {
				this.$delete(this.subjectList[this.current], 'answer');
			}
		},
		confirmSubject() {
			if (this.examType == 1) {
				// 模拟考试查看结果
				uni.redirectTo({
					url: '../resultsView/resultsView'
				});
			} else {
				// 正式考试交卷逻辑
				uni.showToast({
					title: '提交答卷成功',
					icon: 'none',
					mask: true,
					success() {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					}
				});
			}
		},
		timeEnd() {
			//倒计时结束
			this.show = true;
			this.content = '考试时间已到达无法继续答题，请交卷';
			this.showCancelBtn = false;
			this.confirmText = '提交答卷';
		}
	},
	computed: {
		// 判断题型
		subjectName() {
			return this.types.filter(v => v.type == this.subjectList[this.current].WIDGETS_ID)[0];
		},
		// 已答题数量
		answerCurrent() {
			return this.subjectList.length - this.unanswered.length;
		},
		wordsNumber: {
			get() {
				return this.subjectList[this.current].answer?.length || 0;
			},
			set() {
				this.subjectList[this.current].answer?.length || 0;
			}
		}
	},
	watch: {
		subjectList() {
			if (this.subjectList[this.current].hasOwnProperty('answer')) {
				this.unanswered.splice(this.unanswered.indexOf(this.current), 1);
			} else {
				this.unanswered.push(this.current);
				this.unanswered = [...new Set(this.unanswered)];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	padding-bottom: 30upx;
}
.right-box {
	display: flex;
	align-items: center;
	justify-content: right;
	image {
		width: 24upx;
		height: 24upx;
		margin-right: 5upx;
	}
}

.empty-box {
	padding-top: 140upx;
	text-align: center;

	image {
		width: 500upx;
		height: 500upx;
	}

	text {
		display: block;
		color: #949dae;
		font-size: 28upx;
	}
}

@mixin menu-style() {
	display: flex;
	justify-content: space-between;
	color: #788196;
	font-size: 28upx;
	margin-bottom: 32upx;

	.menu-item {
		flex: 1;
		text-align: center;
		padding: 20upx 0;
		background: #ffffff;
		border-radius: 8upx;

		&:nth-child(2) {
			margin: 0 14upx;
		}
	}
}

.layout-box {
	padding: 32upx;
	margin-bottom: 48upx;

	.menu-box {
		@include menu-style();
	}

	.progress-box {
		display: flex;
		align-items: center;
		color: #7c7c7c;
		margin-bottom: 32upx;

		text {
			&:first-child {
				color: $color-2d6;
			}

			&:nth-child(2) {
				display: inline-block;
				margin-right: 12upx;
			}
		}
	}

	.subject-box {
		background: #ffffff;
		border-radius: 32upx;
		font-size: 28upx;

		.subject-content {
			padding: 75upx 60upx;
		}

		.title-box {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 88upx;

			.subject-number {
				color: $color-2d6;
				font-weight: 600;
			}

			.subject-title {
				color: $color-2b2;
			}
		}

		.answer-box {
			color: $color-6e6;

			radio,
			checkbox {
				opacity: 0;
			}

			textarea {
				background-color: #f9f9f9;
				max-width: 100%;
				border-radius: 16upx;
				height: 424upx;
				font-size: 28upx;
				padding: 20upx;
				box-sizing: border-box;
			}

			label {
				display: block;
				margin-bottom: 32upx;
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				border-radius: 45px;
				border: 2px solid #dedede;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.subItem-box:not(:last-child) {
				margin-bottom: 40upx;
			}

			.subTitle-box {
				margin: 0 0 24upx 24upx;
			}

			.filling-box {
				position: relative;

				.words {
					position: absolute;
					color: #b6b6b6;
					bottom: 24upx;
					right: 24upx;
				}
			}

			.check-label {
				background-color: $color-2d6;
				color: #ffffff;
				border-color: $color-2d6;
			}
		}

		.control-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 32upx;
			color: $color-2d6;
			border-top: 2upx solid #eeeeee;

			.control-item {
				flex: 1;
				text-align: center;
			}

			text {
				display: inline-block;
				padding: 32upx 0;
			}

			image {
				width: 32upx;
				height: 36upx;
			}
		}
	}
}

.btn-box {
	padding: 0 32upx;

	.confirm-btn {
		background-color: $color-2d6;
		color: #ffffff;
		font-size: 28upx;
		height: 88upx;
	}
}

.wrap {
	background: #ffffff;

	.menu-box {
		@include menu-style() padding: 32upx;

		.active {
			background: $color-2d6 !important;
			color: #ffffff;
		}

		.menu-item {
			background-color: #f8f8f8;
		}
	}

	.number-box {
		box-sizing: border-box;
		height: 600upx;
		padding: 30upx 32upx 38upx 32upx;
		display: flex;
		flex-wrap: wrap;

		.active {
			background: $color-2d6;
			color: #ffffff;
		}

		.number-item {
			display: inline-block;
			width: 98upx;
			height: 98upx;
			border-radius: 50%;
			border: 2upx solid #c9c9c9;
			margin-right: 48upx;
			margin-bottom: 44upx;
			text-align: center;
			line-height: 98upx;

			&:nth-child(5n) {
				margin-right: 0;
			}

			text {
				color: #c9c9c9;
				font-size: 48upx;
			}
		}
	}
}

/deep/ rich-text {
	p,
	div {
		display: inline;
	}
}
</style>
